<template>
    <div>
        <van-space></van-space>
        <van-row>
            <div id="video" :class="videoImg">
                <img id="img" :src="img" alt="视频" @onerror="reloadImg">
            </div>
        </van-row>
        <van-space></van-space>
        <van-row align="center">
            <van-col span="5"></van-col>
            <van-col span="4">
                <van-button icon="arrow-up" plain type="primary" @click="send(1,['0'])"/>
            </van-col>
            <van-col offset="4" span="4">
                <a-switch checked-color="#F53F3F" unchecked-color="rgb(var(--gray-4)" @change="videoSwitch">
                    <template #checked>
                        <icon-video-camera size="2em"/>
                    </template>
                    <template #unchecked>
                        <icon-video-camera size="2em"/>
                    </template>
                </a-switch>
            </van-col>
            <van-col span="4">
                <a-switch checked-color="#14C9C9" unchecked-color="rgb(var(--gray-4)" @change="lightSwitch">
                    <template #checked>
                        <icon-sun-fill size="2em"/>
                    </template>
                    <template #unchecked>
                        <icon-sun-fill size="2em"/>
                    </template>
                </a-switch>
            </van-col>
        </van-row>
        <van-space></van-space>
        <van-row align="center">
            <van-col span="4" offset="1">
                <van-button icon="arrow-left" plain type="primary" @touchstart="send(1,['2'])"
                            @touchend="send(1,['4'])"/>
            </van-col>
            <van-col span="4"></van-col>
            <van-col span="4">
                <van-button icon="arrow" plain type="primary" @touchstart="send(1,['3'])" @touchend="send(1,['5'])"/>
            </van-col>
            <van-col span="4">
                <van-button type="primary" @click="maxSpeed">
                    <template #icon>
                        <icon-to-top size="1em"/>
                    </template>
                </van-button>
            </van-col>
            <van-col span="4">
                <van-button type="warning" @click="send(1,['6'])">
                    <template #icon>
                        <van-icon name="pause-circle-o" size="1.2em"/>
                    </template>
                </van-button>
            </van-col>
        </van-row>
        <van-space></van-space>
        <van-row align="center">
            <van-col span="5"></van-col>
            <van-col span="8">
                <van-button icon="arrow-down" plain type="primary" @click="send(1,['1'])"/>
            </van-col>
            <van-col span="4">

            </van-col>
            <van-col span="4">

            </van-col>
        </van-row>
        <van-space></van-space>
        <van-row>
            <van-col offset="1" span="4">
                <van-button type="success" plain @click="addSpeed">
                    <template #icon>
                        <icon-caret-up size="1em"/>
                    </template>
                </van-button>
            </van-col>
            <van-col span="14">
                <div class="slider-dev">

                    <van-slider v-model="speed" @change="speedChange" active-color="#37c279">
                        <template #button>
                            <div class="slider_ball">{{ speed }}</div>
                        </template>
                    </van-slider>
                </div>

            </van-col>
            <van-col offset="1" span="4">
                <van-button type="success" plain @click="reduceSpeed">
                    <template #icon>
                        <icon-caret-down size="1em"/>
                    </template>
                </van-button>
            </van-col>
        </van-row>
        <van-collapse v-model="active_item">
            <van-collapse-item title="设置" name="servo" icon="setting-o">
                <van-row>
                    <van-col span="4">水平镜像</van-col>
                    <van-col span="4">
                        <a-switch checked-color="#14C9C9" unchecked-color="rgb(var(--gray-4)" @change="hMirror">
                        </a-switch>
                    </van-col>
                    <van-col span="4">上下翻转</van-col>
                    <van-col span="4">
                        <a-switch checked-color="#14C9C9" unchecked-color="rgb(var(--gray-4)" @change="vFlip">
                        </a-switch>

                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="4">亮度增益</van-col>
                    <van-col span="8" offset="12">
                        <van-stepper v-model="brightness" min="-2" max="2" @change="setBrightness"/>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="4">饱和度</van-col>
                    <van-col span="8" offset="12">
                        <van-stepper v-model="saturation" min="-2" max="2" @change="setSaturation"/>
                    </van-col>
                </van-row>
                <van-space></van-space>
                <van-row>
                    <van-col span="6">画质压缩级别</van-col>
                    <van-col span="8" offset="10">
                        <van-stepper v-model="quality" min="0" max="63" @change="setQuality"/>
                    </van-col>
                </van-row>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>
<script>
import axios from "axios";


import {IconCaretDown, IconCaretUp, IconSunFill, IconToTop, IconVideoCamera} from "@arco-design/web-vue/es/icon";
import {Message} from "@arco-design/web-vue";
import {cmdChannel} from "@/js/on_start";
import {video_svg} from "@/js/res";
export default {
    name: 'cam_car',
    components: {
        IconToTop,
        IconVideoCamera,
        IconSunFill,
        IconCaretUp,
        IconCaretDown
    }
    , data() {
        return {
            sn: '',
            websocket: null,
            img: video_svg,
            speed: 100,
            videoImg: 'videoImg',
            active_item: [],
            brightness: 0,
            saturation: 0,
            quality: 10,
            attachVideoChannel: {
                devSn: "",
                channelIndex:0,
                channelType:0 // mjpeg
            }
        }
    },
    created() {
        this.sn = history.state['sn'];
        if (process.env.NODE_ENV === 'development') {
            Message.info({content: `this sn is  ${this.sn}`, showIcon: true});
        }
        let currentLightDev = window.currentLightDev;
        this.attachVideoChannel.channelIndex = currentLightDev['channelIndex'];
        this.quality = currentLightDev['quality'];
        this.attachVideoChannel.devSn = this.sn;
    }, methods: {
        send(opcode, params) {
            cmdChannel.sendRawCmd(this.sn, opcode, params);
        },
        videoSwitch(event) {
            let attachVideoChannel = this.attachVideoChannel;
            if (event) {
                let url = '/dm/attachVideoChannel';
                if (process.env.NODE_ENV === 'development') {
                    url = window.dev.httpUrlBase + url;
                }
                axios.post(url, attachVideoChannel).then(console.log).catch(console.log)
                this.img = window.lightServerVideoBase + this.sn
                this.send(3, ['0']);
                // 清空左padding
                this.videoImg = 'video';
            } else {
                this.send(3, ['1']);
                this.img = video_svg;
                this.videoImg = 'videoImg';
            }
        },
        reloadImg() {
            if (this.videoImg === 'video') {
                this.img = window.lightServerVideoBase + this.sn
            }
        },
        lightSwitch(event) {
            this.send(3, event ? ['2'] : ['3']);
        },
        vFlip(event) {
            // camSetting 4 single 0 v_flip 11 on 1 off 0
            this.send(4, ['0', '11', event ? '1' : '0']);
        },
        hMirror(event) {
            // camSetting 4 single 0 h_mirror 10 on 1 off 0
            this.send(4, ['0', '10', event ? '1' : '0']);
        },
        setBrightness(value) {
            // camSetting 4 single 0 brightness 1
            this.send(4, ['0', '1', `${value}`]);
        },
        setSaturation(value) {
            // camSetting 4 single 0 saturation 2
            this.send(4, ['0', '2', `${value}`]);
        },
        setQuality(value) {
            // camSetting 4 single 0 quality 5
            this.send(4, ['0', '5', `${value}`]);
        },
        speedChange() {
            this.send(2, ['0', `${this.speed}`])
        },
        addSpeed() {
            let nextSpeed = this.speed + 5;
            this.speed = nextSpeed > 100 ? 100 : nextSpeed;
            this.send(2, ['0', `${this.speed}`]);
        },
        reduceSpeed() {
            let nextSpeed = this.speed - 5;
            this.speed = nextSpeed < 0 ? 0 : nextSpeed;
            this.send(2, ['0', `${this.speed}`])
        },
        maxSpeed() {
            this.speed = 100;
            this.send(2, ['0', '100'])
        }
    }
}
</script>
<style>
.slider-dev {
    height: 3em;
    padding-top: 1.5em;
}

.videoImg {
    margin-left: 3em;
    width: 100%;
}

.video {
    display: block;
    position: relative;
}

.video > img {
    display: block;
    width: var(--availWidth);
    top: 0;
    bottom: 0;
}


.slider_ball {
    width: 2em;
    height: 2em;
    color: #fff;
    text-align: center;
    background-color: var(--van-success-color);
    border-radius: 50%;
    vertical-align: middle;
    line-height: 2em;
}

#video {
    box-shadow: 1px 1px 2px 1px rgb(var(--gray-3));
    border-radius: 10px;
    text-align: center;
    background: rgb(var(--gray-3));
    max-width: 20em;
}
</style>